<template>
    <el-drawer v-model="showDrawer" size="47%" :destroy-on-close="true" class="drawer">
        <template #title>
            <h4 class="drawerTitle">客户明细</h4>
        </template>
        <template #default>
            <ZwTable
                ref="tableRef"
                class="table-box"
                :option="tableOption"
                :row-key="getRowKey"
                :fetch-params="state.searchParams"
                :fetch-api="fetchApi()"
                @dataChange="dataChange">
                <template #headerOperate>
                    <el-button size="small" class="btn" @click="exportDetils">导出</el-button>
                </template>
            </ZwTable>
        </template>
    </el-drawer>
</template>

<script lang="tsx" setup>
import { ref, reactive, computed } from 'vue';
import { deepCopy } from '@/utils/helper';
import { cusDetails, detailsExp } from '@/api/smartMarketing/drainage/channelCode/index';
import ZwTable from '@/components/zw/table/Table';
import { ElImage, ElIcon } from 'element-plus';
import { Picture as IconPicture } from '@element-plus/icons-vue';

const showDrawer = ref(false);
const exParams = reactive({
    page: 1,
    page_size: 15
});

const openFn = (rowId: number) => {
    showDrawer.value = true;
    state.searchParams.activity_id = rowId;
};

const tableOption = [
    {
        label: '客户信息',
        width: 300,
        render({ row, column, index }) {
            const slotError = () => (
                <div class="image_slot">
                    <ElIcon>
                        <IconPicture />
                    </ElIcon>
                </div>
            );
            return (
                <div class="cusInfo">
                    <ElImage
                        style="width: 36px; height: 36px"
                        preview-src-list={[row.cust_avatar]}
                        preview-teleported={true}
                        vSlots={{ error: slotError }}
                        src={row.cust_avatar}
                        fit="cover"
                        class="avatar"></ElImage>
                    <div class="cusConet" onClick={() => toDetail(row)}>
                        <span class="cusName">{row.cust_name}</span>
                        <span vShow={row.cust_nickname} class="cust_border">
                            |
                        </span>
                        <span class="cust_nickname" vShow={row.cust_nickname}>
                            {row.cust_nickname}
                        </span>
                        <div class="cust_remark" vShow={row.cust_remark}>
                            <span class="cust_remark_text">( {row.cust_remark}</span> <span>)</span>
                        </div>
                    </div>
                </div>
            );
        }
    },
    {
        label: '添加成员',
        render({ row, column, index }) {
            return <div>{row.user_name || '--'}</div>;
        }
    },
    {
        label: '客户状态',
        render({ row, column, index }) {
            return <div>{row.cust_status || '--'}</div>;
        }
    },
    {
        label: '添加时间',
        render({ row, column, index }) {
            return <div>{row.created_at || '--'}</div>;
        }
    }
];
const getRowKey = (row: any) => {
    return row.id;
};
const defaultParams = reactive({
    activity_id: ''
});
const state = reactive({
    searchParams: deepCopy(defaultParams)
});
const fetchApi = () => {
    // 获取文件列表
    // getTableH()
    return cusDetails;
};
const dataChange = (data: any) => {
    exParams.page = data.page;
    exParams.page_size = data.page_size;
};
const exportDetils = () => {
    const res = {
        ...exParams,
        ...state.searchParams
    };
    detailsExp(res).then((res: any) => {
        window.location.href = res.url;
    });
};
const toDetail = (row: any) => {
    const { cust_id, cust_type: type } = row;
    const url = `/customer/manage/list/detail?id=${cust_id}&type=${type}`;
    window.open(url, '_blank');
};
defineExpose({
    showDrawer,
    openFn
});
</script>

<style lang="scss" scoped>
:deep(.cusConet) {
    display: flex;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 150px;
}
:deep(.cusInfo) {
    display: flex;
    align-items: center;
    &:hover {
        cursor: pointer;
        color: #2fb6e4;
    }

    .cusName {
        margin-left: 5px;
    }
    .cust_border {
        margin: 0 5px;
    }

    .cust_nickname {
        max-width: 70px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        margin-right: 5px;
    }

    .cust_remark {
        &_text {
            max-width: 50px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    }

    .avatar {
        width: 60px;
        height: 60px;
        border-radius: 4px;

        .image-slot {
            .el-icon {
                font-size: 36px;
            }
        }
    }

    .name {
        margin: 0 5px;
    }

    .channel {
        font-size: 14px;
        color: #60b900;
    }

    .sex {
        width: 18px;
        height: 18px;

        img {
            width: 100%;
            height: 100%;
        }
    }
}
.tableData {
    background: #ffffff;
    // box-sizing: border-box;
    border: 1px solid #eaeaea;

    .tagList {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .tag_item {
            padding: 4px;
            color: #ff6b00;
            margin: 0 10px 10px 0;
            border-radius: 2px;
            border: 1px solid #ffc69e;

            &:nth-child(n + 6) {
                display: none;
            }
        }
    }

    .emty {
        margin-top: 200px;
        // display: flex;
        // flex-direction: column;
    }

    .emty_img {
        transform: translateX(15%);
    }

    .emty_title {
        margin-top: -50px;
    }
}

:deep(.el-drawer__header) {
    padding: 16px;
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 0px;
}
.drawerTitle {
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #33302d;
}
</style>
